<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心动画</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        .love-text {
            position: absolute;
            font-size: 5rem;
            font-weight: bold;
            color: #7ec0ee;
            text-shadow: 0 0 10px #7ec0ee, 0 0 20px #7ec0ee;
            opacity: 0;
            animation: textFadeInOut 3s infinite alternate;
            z-index: 100;
        }
        
        @keyframes textFadeInOut {
            0%, 100% {
                opacity: 0;
                transform: scale(0.8);
            }
            50% {
                opacity: 1;
                transform: scale(1.1);
            }
        }
        
        .heart {
            position: absolute;
            pointer-events: none;
            animation: float 4s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            50% {
                transform: translateY(-20px) rotate(10deg);
                opacity: 0.7;
            }
        }
        
        .heart::before, .heart::after {
            content: "";
            position: absolute;
            top: 0;
            width: 30px;
            height: 50px;
            border-radius: 30px 30px 0 0;
            background: #ff69b4;
            box-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4, 0 0 30px #ff69b4;
        }
        
        .heart::before {
            left: 30px;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }
        
        .heart::after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="love-text">LOVE涌嘉<br/>结婚20年<br/>幸福快乐</div>
    
    <script>
        function createHearts() {
            const container = document.body;
            const heartCount = 50;
            
            for (let i = 0; i < heartCount; i++) {
                const heart = document.createElement('div');
                heart.className = 'heart';
                
                // 随机大小
                const size = Math.random() * 0.8 + 0.2;
                heart.style.transform = `scale(${size})`;
                
                // 随机位置
                const xPos = Math.random() * window.innerWidth;
                const yPos = Math.random() * window.innerHeight;
                heart.style.left = `${xPos}px`;
                heart.style.top = `${yPos}px`;
                
                // 随机动画延迟
                heart.style.animationDelay = `${Math.random() * 4}s`;
                
                container.appendChild(heart);
            }
        }
        
        // 页面加载后立即创建爱心
        window.onload = function() {
            createHearts();
            
            // 每隔一段时间添加新爱心
            setInterval(() => {
                const oldHearts = document.querySelectorAll('.heart');
                if (oldHearts.length > 100) {
                    for (let i = 0; i < 10; i++) {
                        if (oldHearts[i]) {
                            oldHearts[i].remove();
                        }
                    }
                }
                
                createHearts();
            }, 1000);
        };
    </script>
</body>
</html>